<!doctype html>
<html>
    <head>
        <title>AirCraft</title>
        <meta charset="UTF-8">
        <style media = "screen">
            canvas {
                border: 1px black solid;
            }
        </style>
        <!-- game 相关文件 -->
        <script src = "game/utils.js"></script> 
        <script src = "game/classGame.js"></script> 
        <script src = "game/gameImage.js"></script> 
        <!-- 场景文件 -->
        <script src = "scene/main/bullet.js"></script> 
        <script src = "scene/main/particle.js"></script> 
        <script src = "scene/main/enemy.js"></script> 
        <script src = "scene/main/bg.js"></script> 
        <script src = "scene/main/player.js"></script> 
        <script src = "scene/main/cloud.js"></script> 
        <script src = "scene/main/scene.js"></script> 
        <!-- 结束和标题场景 -->
        <script src = "scene/end/end.js"></script> 
    </head>
    <body>
        <canvas id = "canvas" width="500" height="600"></canvas>
        <hr>
       <div>
            <label>
                <input class = "game-auto-slider" type = "range"
                    value = "60"
                    min = "10"
                    max = "100"
                    data-value = "config.fps"
                >
                游戏帧数：<span class = "game-label"></span>
            </label>
        </div>

        <div>
            <label>
                <input class = "game-auto-slider" type = "range"
                    value = "8"
                    min = "1"
                    max = "10"
                    data-value = "config.fire_cooldown"
                >
                子弹冷却时间：<span class = "game-label"></span>
            </label>
        </div>

        <div>
            <label>
                <input class = "game-auto-slider" type = "range"
                    value = "2"
                    min = "-10"
                    max = "10"
                    data-value = "config.cloud_speed"
                >
                云速度：<span class = "game-label"></span>
            </label>
        </div>

        <div>
            <label>
                <input class = "game-auto-slider" type = "range"
                    value = ""
                    min = "1"
                    max = "10"
                    data-value = "config.player_speed"
                >
                玩家速度：<span class = "game-label"></span>
            </label>
        </div>

        <div>
            <label>
                <input class = "game-auto-slider" type = "range"
                    value = ""
                    data-value = "config.bullet_speed"
                >
                子弹速度：<span class = "game-label"></span>
            </label>
        </div>


    <!--
        <div class = "">
            <textarea id="id-text-log" rows = "10" cols = "60"></textarea>
        </div>
    -->

        <script src = "main.js"></script>

        <script>
            var es = sel => document.querySelectorAll(sel)

            var bindAll = function(sel, eventName, callback){
                var l = es(sel)

                for (var i = 0; i < l.length; i ++){
                    var input = l[i]
                    input.addEventListener(eventName, function(event){
                        callback(event)
                    })
                }
            }

            bindAll(".game-auto-slider", "input", function(event){
                var target = event.target
                var bindVar = target.dataset.value
                var v = target.value
                eval(bindVar + "=" + v)
                var label = target.closest("label").querySelector(".game-label")
                label.innerText = v
            })

        </script>

    </body>
</html>